<template>
  <div>
    <!-- this.$router.back() : 路由后退 ===== 页面中的后退按钮 -->
    <!-- 搜索区域 输入框 -->
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- @input='hInput' -->
    <!-- @input='throttleInput' -->
    <!-- @input='hInput_debounce_with_lodash' -->
    <van-search
      v-model.trim="keyword"
      show-action
      shape="round"
      background="linear-gradient(to right, #ff6034, #ee0a24)"
      placeholder="请输入搜索关键词"
      @input='hInput_throttle_with_lodash'
    >
      <!-- #action  ==== slot="action" -->
      <template #action>
        <div @click="hSearch">搜索</div>
      </template>
    </van-search>

    <!-- 搜索建议 -->
    <van-cell-group v-if="options.length">
      <van-cell
        v-for="(option,idx) in cSuggestions"
        :key="idx"
        icon="search"
        @click="hClickSuggetion(idx)"
      >
        <div v-html="option"></div>
      </van-cell>
    </van-cell-group>

    <!-- 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录" />

      <van-cell
        v-for="(history,idx) in historys"
        :key="idx"
        :title="history"
        @click="$router.push('/result?keyword='+ history)"
      >
        <van-icon
          name="close"
          @click.stop="hDelHistory(idx)"
        ></van-icon>
      </van-cell>

    </van-cell-group>
  </div>
</template>

<script>
import { getHistory, setHistory } from '@/utils/storageHistory.js'
import { getSuggestion } from '@/api/search.js'
import { throttle } from '@/utils/tools.js'
// 引入带节流防抖函数的lodash包
import _ from 'lodash'
export default {
  name: 'search',
  data: function () {
    return {
      keyword: '', // 关键字
      options: [], // 联想建议
      historys: getHistory() || [] // 历史记录 初始化，先从本地存储中取值，取不到，则用[]
    }
  },
  computed: {
    cSuggestions () {
      // 定义一个正则匹配keyword g 全局匹配 i 不区分打小写
      const reg = new RegExp(this.keyword, 'gi')
      // 对原数据 suggestions中的每一项都做正则匹配，得到高亮之后的字符串
      return this.options.map(sug => sug.replace(reg, val => '<span style="color:red">' + val + '</span>'))
    }
  },
  methods: {
    // 删除一条记录
    hDelHistory (idx) {
      this.historys.splice(idx, 1)
      // 持久化
      setHistory(this.historys)
    },
    // 添加一条历史记录
    addHistory (str) {
      // 1 不能有重复
      const idx = this.historys.findIndex(item => item === str)
      if (idx > -1) {
        this.historys.splice(idx, 1)
      }
      // 2 放在数组前面
      this.historys.unshift(str)

      // 3持久化
      setHistory(this.historys)
    },
    // 用户点击了搜索按钮
    hSearch () {
      if (this.keyword === '') {
        return
      }
      // 1添加一条历史
      this.addHistory(this.keyword)
      // 2 跳转到搜索结果页
      this.$router.push('/result?keyword=' + this.keyword)
    },
    // 用户点击了搜索建议
    hClickSuggetion (idx) {
      // 1 添加一条历史
      this.addHistory(this.options[idx])
      // 2 跳转到搜索结果页
      this.$router.push('/result?keyword=' + this.options[idx])
    },
    // 防抖函数
    hInput_debounce_with_lodash: _.debounce(function () {
      this.hInput()
    }, 0.5 * 1000),
    // 节流函数
    hInput_throttle_with_lodash: _.throttle(function () {
      this.hInput()
    }, 0.5 * 1000),
    // 节流处理方法
    throttleInput: throttle(function () {
      this.hInput()
    }, 500),
    // 用户在搜索框输入的内容发生了变化
    async hInput () {
      // 如果用户没有输入任何内容，则清空建议，不要发请求了
      if (this.keyword === '') {
        this.options = []
        return
      }
      try {
        // 发请求获取联想建议
        const res = await getSuggestion(this.keyword)
        this.options = res.data.data.options
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar .van-icon {
  color: #fff;
}
</style>
